<template>
  <div id="cornerComment" v-if="dialogVisible">
    <div class="cornerComment-in">
      <div class="cornerComment-in-title">
        <span>编辑角色</span>
        <span class="el-icon-circle-close close-Btn-line" @click="closePOpup"></span>
      </div>
      <div class="commentBody">
        <el-form label-width="100px" ref="editForm" :rules="editFormRules" :model="editForm">
          <el-form-item label="角色名称" prop="name">
            <el-input auto-complete="off" placeholder="填写角色名称" v-model="editForm.name"></el-input>
          </el-form-item>
          <el-form-item label="角色备注" prop="remark">
            <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入角色备注"
                v-model="editForm.remark">
            </el-input>
          </el-form-item>
          <el-form-item label="角色权限" prop="position">
            <p class="warninfo"><i class="el-icon-warning-outline"></i>请勾选角色所需要配置的权限</p>
            <el-tree
                :data="dataline"
                show-checkbox
                node-key="id"
                ref="tree"
                accordion
                :default-checked-keys="checkedKeys"
                :props="defaultProps"
                @node-click="nodeClick"
                @check-change="handleCheckChange">
              <!--<div class="custom-tree-node" slot-scope="{ node, data }">-->
              <!--<div class="tree_title">-->
              <!--<div class="tree_label">{{ node.label }},{{ data.id }}</div>-->
              <!--</div>-->
              <!--</div>-->
            </el-tree>
          </el-form-item>
        </el-form>
      </div>
      <div class="cornerComment-in-footer">
        <el-button @click.native="closePOpup" size="small">取消</el-button>
        <el-button size="small" type="primary" @click="submitForm('editForm')">确定并保存</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import menulist from '@/utils/menu.js'

export default {
  props: ['visible', 'editId'], // recruitmentType examine 审核
  components: {},
  data() {
    return {
      dialogVisible: false,
      expandedKeys: '', // [2, 3] 默认展开
      checkedKeys: [], // [5] 默认选中
      dataline: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      editForm: {
        name: '',
        remark: '',
        power: '',
        status: 1
      }, // 编辑界面数据
      editFormRules: {
        name: [
          {required: true, message: '请填写角色名称', trigger: 'blur'}
        ]
      },
    }
  },
  watch: {
    visible() {
      this.dialogVisible = this.visible
      if (this.visible) {
        this.dataline = menulist.meaulist
        if (this.editId) {
          this.InitFn()
        }
      } else {
        this.expandedKeys = '' // [2, 3] 默认展开
        this.checkedKeys = [] // [5] 默认选中
        this.dataline = []
        this.editForm = {
          name: '',
          remark: '',
          power: '',
          status: 1
        } // 编辑界面数据
      }
    }
  },
  created() {
  },
  methods: {
    async InitFn() {
      let data = await this.$fetch(this.api.admin_role_edit, {
        id: this.editId
      });
      if (!data.code) {
        this.editForm.name = data.vo.name
        this.editForm.remark = data.vo.remark
        this.editForm.power = data.vo.power
        if (data.vo.power) {
          // 需要进行二次判断是否有新功能
          this.getRealPower(JSON.parse(data.vo.power))
        }
      }
    },
    getRealPower(option) {
      // console.log('可操作的导航：', this.dataline)
      let a = JSON.parse(JSON.stringify(option))
      for (let i in this.dataline) {
        let n = 0;
        if (this.dataline[i].children && this.dataline[i].children.length) {
          for (let m in this.dataline[i].children[m]) {
            if (a.indexOf(this.dataline[i].children[m].id) !== -1) {
              n++;
            }
          }
          if (n !== this.dataline[i].children.length && a.indexOf(this.dataline[i].id) !== -1) {
            a.splice(a.indexOf(this.dataline[i].id), 1)
          }
        }
      }
      // console.log('重组后的数据内容：', a)
      this.checkedKeys = a // 权限
    },
    handleSelectionChange(val) {
      this.handleSelection = val
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.submitFormAdd()
        } else {
          // console.log('error submit!!')
          return false
        }
      })
    },
    submitFormAdd() {
      let url_ = this.api.admin_role_add
      if (this.editId) {
        url_ = this.api.admin_role_edit
        this.editForm.id = this.editId
      }
      this.editForm.power = JSON.stringify(this.checkedKeys)
      this.$post(url_, this.editForm).then((response) => {
        if (response.code === 0) {
          this.$message({
            message: '编辑成功',
            type: 'success'
          })
          this.closePOpup()
          // if (!this.editId) {
          //   this.$confirm('编辑成功是否继续添加', '提示', {
          //     confirmButtonText: '确定',
          //     cancelButtonText: '返回列表',
          //     type: 'warning'
          //   }).then(() => {
          //     this.$refs.editForm.resetFields()
          //   }).catch(() => {
          //     this.$router.go(-1)
          //     this.$refs.editForm.resetFields()
          //   })
          // } else {
          //   this.$message({
          //     message: '编辑成功',
          //     type: 'success'
          //   })
          // }
        } else {
          this.$message.error(response.msg)
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    nodeClick(option) {
      // 点击展开
      // console.log('nodeClick', option, this.checkedKeys)
    },
    handleCheckChange(data, checked, indeterminate) {
      // 选择了 checked选择的状态 true
      // console.log('断点1', data, checked, indeterminate)
      // if (data.label === '活动评价') {
      //   console.log('handleCheckChange', data, checked, indeterminate, this.checkedKeys)
      // }

      if (checked) {
        // if (data.label === '活动评价') {
        //   console.log('ok')
        // }
        if (this.checkedKeys.indexOf(data.id) === -1) {
          // console.log('data.id:', data.id)
          this.checkedKeys.push(data.id)
        }
        if (data.children && data.children.length) {
          for (let i in data.children) {
            if (this.checkedKeys.indexOf(data.children[i].id) === -1) {
              // console.log('data.id2:', data.children[i].id, this.checkedKeys.indexOf(data.children[i].id))
              this.checkedKeys.push(data.children[i].id)
            }
            if (data.children[i].children) {
              if (data.children[i].children.length) {
                for (let n in data.children[i].children) {
                  if (this.checkedKeys.indexOf(data.children[i].children[n].id) === -1) {
                    this.checkedKeys.push(data.children[i].children[n].id)
                  }
                }
              }
            }
          }
        }
      } else {
        // if (data.label === '活动评价') {
        //   console.log('no')
        // }
        if (this.checkedKeys.indexOf(data.id) !== -1) {
          this.checkedKeys.splice(this.checkedKeys.indexOf(data.id), 1)
          if (data.children && data.children.length) {
            if (!indeterminate) {
              for (let i in data.children) {
                if (this.checkedKeys.indexOf(data.children[i].id) !== -1) {
                  this.checkedKeys.splice(this.checkedKeys.indexOf(data.children[i].id), 1)
                }
                if (data.children[i].children) {
                  if (data.children[i].children.length) {
                    for (let n in data.children[i].children) {
                      if (this.checkedKeys.indexOf(data.children[i].children[n].id) !== -1) {
                        this.checkedKeys.splice(data.children[i].children[n].id)
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
      // console.log('this.checkedKeys:', this.checkedKeys)
      // console.log('最后id', this.checkedKeys)
    },
    // 关闭弹窗
    closePOpup() {
      this.$emit('update:visible', false)
    },
    getJson(option) {
      return JSON.parse(JSON.stringify(option))
    },
  },
  mounted() {
  }
}
</script>
<style scoped>
#cornerComment {
  height: 100vh;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9;
}

.cornerComment-in {
  width: 600px;
  height: 80%;
  background: #fff;
  display: flex;
  flex-direction: column;
  border-radius: 5px;
}

.cornerComment-in-title {
  height: 50px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ddd;
  font-size: 24px;
}

.cornerComment-in-title span {
  padding: 0 10px;
}

.cornerComment-in-title span:first-child {
  flex: 1;
  font-size: 16px;
}

.cornerComment-in-footer {
  height: 50px;
  border-top: 1px solid #ddd;
  display: flex;
  align-items: center;
  padding: 0 10px;
  justify-content: center;
}

.commentBody {
  padding: 20px;
  flex: 1;
  overflow-y: auto;
}

.close-Btn-line {
  cursor: pointer;
}

.resruitment-title {
  padding: 5px 0;
  border-bottom: 2px solid #abd3f3;
  margin-bottom: 20px;
}

.el-radio {
  margin-right: 20px;
}

.jobTime {
  display: flex;
  align-items: center;
}

.jobTime span {
  padding: 0 10px;
}
</style>


